import React, { FC, memo, useRef, useMemo } from 'react';
import { useUnitContext } from '../UnitContext';
import { Button, Space, Table, Tag, Popconfirm } from 'antd';
import FormModal from './FormModal';
import classNames from 'classnames/bind';
import style from '../style/style.module.scss';
const cx = classNames.bind(style);

const { Column } = Table;

interface DataType {
  id: React.Key;
  name: string;
  age: number;
  address: string;
}

const rowSelection = {
  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record: DataType) => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name
  })
};

const TableList: FC = memo(() => {
  console.log('+++++++++++++++');
  const {
    listQuery,
    tableList,
    total,
    loading,
    receiveModeFilter,
    statusFilter,
    delTableItem,
    setListQuery
  } = useUnitContext();
  // console.log('父组件渲染', tableList, total, listQuery);

  const formModalRef = useRef<{ setOpen: any }>();

  const pageChange = (page: number) => {
    setListQuery([{ key: 'pageNo', value: page }]);
  };

  const activeEditDataRef = useRef<any>();
  activeEditDataRef.current = {};
  const showFormModal = (type: boolean, data?: any) => {
    const { setOpen } = formModalRef.current;
    if (type) {
      activeEditDataRef.current = data;
      setOpen(true);
    } else {
      activeEditDataRef.current = {};
      setOpen(true);
    }
  };

  // 删除
  const delTableItemFn = (id: number) => {
    delTableItem(id);
  };

  return (
    <>
      <div className={cx('tool')}>
        <div className={cx('title')}>table标题</div>
        <div className={cx('toolbars')}>
          <Button type="primary" onClick={() => showFormModal(false)}>
            新建
          </Button>
        </div>
      </div>
      <Table
        rowKey="id"
        loading={loading}
        rowSelection={{ type: 'checkbox', ...rowSelection }}
        dataSource={tableList}
        bordered
        pagination={{ defaultPageSize: listQuery.pageSize, total, onChange: pageChange }}
      >
        <Column title="序号" dataIndex="id" key="id" align="center" width={70} />
        <Column title="名称" dataIndex="name" key="name" />
        <Column
          title="接受方式"
          dataIndex="receiveMode"
          key="receiveMode"
          align="center"
          render={(tag: number) => {
            return <Tag color="blue">{receiveModeFilter(tag)}</Tag>;
          }}
        />
        <Column title="创建时间" dataIndex="createTime" key="createTime" align="center" />
        <Column
          title="状态"
          dataIndex="status"
          key="status"
          align="center"
          render={(status: number) => {
            return <Tag color="blue">{statusFilter(status)}</Tag>;
          }}
        />
        <Column
          title="操作"
          key="action"
          align="center"
          render={(_, record: any) => {
            return (
              <Space>
                <Button type="link" size="small" onClick={() => showFormModal(true, record)}>
                  编辑
                </Button>
                <Popconfirm
                  title="确定删除此数据吗？"
                  okText="确定"
                  cancelText="取消"
                  onConfirm={() => delTableItemFn(record.id)}
                >
                  <Button type="link" size="small">
                    删除
                  </Button>
                </Popconfirm>
              </Space>
            );
          }}
        />
      </Table>

      {useMemo(
        () => (
          <FormModal ref={formModalRef} data={activeEditDataRef} />
        ),
        [activeEditDataRef]
      )}
    </>
  );
});

export default TableList;
